<template>
  <div id="content">
    <!-- 已下单结构 -->
    <ul class="orderBox shopped">
      <li v-for="(item) in payResult" :key="item.table_num">
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>菜品名称</th>
              <th>价格/数量</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,idx) in item.dishes" :key="v.dish_name">
              <td>{{idx+1}}</td>
              <td>
                  <img :src="v.dish_img" alt="">
                  <span>{{v.dish_name}}</span>
              </td>
              <td>￥{{v.unit_price}} x {{v.dish_count}}</td>
              <td>{{v.legend}}</td>
            </tr>
          </tbody>
        </table>
        <div class="foot">
          <div>
            <span>桌号：<strong>{{item.table_num}}</strong>号桌</span>
            <span>人数：{{item.people_num}}</span>
            <span>订单号：{{item.order_num}}</span>
            <span>下单时间：{{item.order_time}}</span>
          </div>
          <div>
            <span>总消费：￥<strong>{{item.totalPrice}}</strong></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getSeatInfoAPI } from '@/api/getSeatInfoAPI.js'
import { getOrderDetailAPI } from '@/api/getOrderDetailAPI.js'
export default {
  name: 'payOrder',
  data () {
    return {
      payList: [],
      payResult: [],
      avltimer: null
    }
  },
  methods: {
    // async getSeatInfo () {
    //   const token = localStorage.getItem('token')
    //   const { data: res } = await getSeatInfoAPI(token)
    //   this.payList = res.data.filter(item => item.legend_class === 'eating')
    // },
    async getOrderDetail () {
      this.payResult = []
      const token = localStorage.getItem('token')
      const { data: res1 } = await getSeatInfoAPI(token)
      this.payList = res1.data.filter(item => item.legend_class === 'eating')
      const { data: res } = await getOrderDetailAPI(token)
      for (var i = 0; i < this.payList.length; i++) {
        this.payResult.push({
          table_num: this.payList[i].seat_id,
          people_num: this.payList[i].people_num,
          order_num: this.payList[i].order_num,
          totalPrice: 0,
          order_time: this.payList[i].order_time,
          dishes: res.data.filter(item => item.table_num === this.payList[i].seat_id).filter(v => v.is_selected === '1')
        })
      }
      this.payResult = this.payResult.filter(item => item.dishes.length !== 0)
      for (var j = 0; j < this.payResult.length; j++) {
        this.payResult[j].dishes.forEach(item => {
          this.payResult[j].totalPrice += item.unit_price * item.dish_count
        })
      }
    }
  },
  created () {
    this.getOrderDetail()
    // this.avltimer = setInterval(() => {
    //   console.log('payOrder创建了')
    //   this.getSeatInfo()
    // }, 50)
  },
  beforeDestroy () {

  }
}
</script>

<style scoped>
#content{
    position: fixed;
    top: 80px;
    right: 20px;
    bottom: 20px;
    left: 300px;
    background: rgba(255, 255, 255, .2);

    box-sizing: border-box;
    padding: 10px;

    overflow-y: auto;
}
.orderBox{
    width: 95%;
    margin: 0 auto;
    padding-top: 20px;
}
.orderBox li{
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
    margin-bottom: 40px;
    padding: 20px;
}
.orderBox img{
    width: 80px;
    height: 80px;
}
.orderBox table{
    width: 100%;
}
.orderBox tr{
    border-bottom: 1px solid rgba(255,255,255,.5);
}
.orderBox td{
    padding: 10px 0;
    text-align: center;
    color: #fff;
}
.orderBox td:nth-child(1){
    width: 5%;
}
.orderBox td:nth-child(6){
    width: 20%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.orderBox button{
    width: 30px;
    height: 30px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
    vertical-align: middle;
}
.orderBox button span{
    font-size: 12px;
}
.orderBox button.select span{
    font-size: 20px;
}
.orderBox .num{
    width: 60px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    box-sizing: border-box;
    border-top: 1px solid rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.5);
    font-size: 12px;
    vertical-align: middle;
}
.orderBox td:nth-child(4){
    font-size: 0;
}

.orderBox .foot{
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 0;
    color: #fff;
}
.orderBox .foot span{
    margin-right: 40px;
}
.orderBox .foot strong{
    color: #ffcb4e;
    font-size: 20px;
}
.orderBox .addDishes{
    width: 50px;
    height: 25px;
    background: #a65335;
    border-radius: 5px;
    border: none;
}
.orderBox .pay{
    width: 80px;
    height: 35px;
    background: #ff8400;
    font-style: 18px;
    border: none;
    border-radius: 5px;
}
.shopped li{
    padding: 0;
}
.shopped th{
    height: 60px;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    text-align: center;
    font-weight: normal;
}
.shopped td:nth-child(2){
    width: 25%;
    text-align: left;
    padding-left: 60px;
}
.shopped img{
    margin-right: 10px;
    vertical-align: middle;
}
.shopped td:nth-child(4){
    font-size: 16px;
}
.shopped .foot{
    padding: 15px 20px;
}
</style>
